// 引入request请求函数
import { request } from '../../request/request'
import { showToast } from '../../utils/wxAsync'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 历史记录列表
    historyList: [],
    // 热门搜索列表
    hotSearchList: [],
    // 关键字联想列表
    keywordList: [],
    // 商品列表
    goodsList: [],
    // 控制是否显示搜索商品无的页面
    hideEmptyPage: true,
    // 搜索结果商品列表
    count: 0,//商品总数量
    totalPages: 0,//商品总页数
    // 搜索参数:
    inputValue: '',// 搜索关键字(输入框值)
    page: 1,// 当前页
    size: 20,// 每页显示商品数量
    sort: 'default',// 商品排序,默认default,价格排序：price
    order: 'desc',// 升序：asc,降序：desc
    categoryId: 0
  },
  // 定时器id
  timer: 0,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getSearchData()
  },
  // 发送请求，获取搜索页面数据
  async getSearchData() {
    const res = await request({url: '/search/index'})
    this.setData({
      historyList: res.data.historyKeywordList,
      hotSearchList: res.data.hotKeywordList
    })
  },
  // 点击搜索框内的清除图标，清除输入框内容
  clearInput() {
    this.setData({
      inputValue: '',
      goodsList: [],
      hideEmptyPage: true,
      page: 1
    })
    this.getSearchData()
  },
  // 点击取消，关闭搜索页面，返回至上一页
  closeSearch() {
    wx.navigateBack({
      delta: 1
    })
  },
  // 点击删除图标，清除历史记录
  async clearHistory () {
    this.setData({
      historyList: []
    })
    const res = await request({url: '/search/clearhistory', method: 'POST', data: {}})
    this.getSearchData()
  },
  // 监听输入框值变化
  inputChange(e) {
    // 获取输入框的值
    let inputValue = e.detail.value.trim()
    this.setData({
      inputValue: inputValue
    })
    // 防抖函数
    if (this.timer) {
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(() => {
      this.getKeywordList(inputValue)
    }, 500)
  },
  // 发送请求，获取关键字联想列表
  async getKeywordList(keyword) {
    const res = await request({url: '/search/helper', data: { keyword }})
    this.setData({
      keywordList: res.data
    })
  },
  // 确认搜索
  confirmSearch(e) {
    const value = e.detail.value
    this.setData({
      inputValue: value
    })
    this.getSearchGoodsList()
  },
  // 发送请求，搜索相关商品
  async getSearchGoodsList() {
    // 准备发送请求的参数
    let { inputValue, page, size, sort, order, categoryId, goodsList } = this.data
    let queryParams = {
      keyword: inputValue,
      page,
      size,
      sort,
      order,
      categoryId
    }
    // 发送请求
    const res = await request({url: '/goods/list', data: queryParams})
    console.log(res)
    if (res.errno === 0) {
      this.setData({
        count: res.data.count,
        totalPages: res.data.totalPages,
        size: res.data.pageSize,
        page: res.data.currentPage,
        goodsList: [...goodsList, ...res.data.goodsList]
      })
      // 若获取结果成功，但商品列表为空，则显示搜索商品无的页面
      if (res.data.goodsList.length === 0) {
        this.setData({
          hideEmptyPage: false
        })
      }
    }
  },
  // 点击历史记录或者热门搜索的Tag标签，直接搜索关键字
  handleTagSearch(e) {
    const { value } = e.currentTarget.dataset
    this.setData({
      inputValue: value
    })
    this.getSearchGoodsList()
  },
  // 排序商品
  handleSortGoods(e) {
    // 获取自定义参数，判断点击的综合或者价格排序
    const { params } = e.currentTarget.dataset
    let { sort, order } = this.data
    console.log(params)
    sort = params
    // 若点击了价格排序，判断升降排序
    if (params === 'price') {
      if (order === 'desc') {
        order = 'asc'
      } else {
        order = 'desc'
      }
    }
    // 更新data中数据
    this.setData({
      sort,
      order,
      // 清空原有数组
      goodsList: [],
      // 重新设置当前页
      page: 1
    })
    this.getSearchGoodsList()
  },
  // 页面触底事件
  async onReachBottom() {
    let { count, totalPages, size, page, goodsList } = this.data
    if (goodsList.length !== 0 && page < totalPages) {
      page++
      this.setData({
        page
      })
      this.getSearchGoodsList()
    } else if (goodsList.length !== 0 && page >= totalPages) {
      await showToast({title: '我是有底线的---', icon: 'none'})
    }
  }
})